<template>
  <div ref="container" style="width: 100%;">
    <Sticky :container="container">
      <NoticeBar v-if="noticeBarvisible" @click="moveToAdd()" :text="text" left-icon="info-o" color="#7aa418"
        background="#f4fede" mode="link" />
    </Sticky>
    <Cell center inset clickable style="color: #1e1e1e; height: 33px;" @click="moveToSearch()" :border="true">

      <template #title>
        <span class="function-titile">添加好友</span>
      </template>
      <template #right-icon>
        <Icon class="function-icon" name="plus" size="13px"></Icon>
      </template>
    </Cell>
    <Search style="margin-top: -2px;" shape="round" v-model="searchWord" placeholder="输入名称搜索通讯录好友" />
    <PersonItem :contactData="filteredContacts" @contactClick="onContactClick"></PersonItem>
  </div>
</template>

<script setup name="Msg">
import { onMounted, reactive, ref, computed } from 'vue';
import { Button, Dialog, NoticeBar, Search, Sticky, Cell, CellGroup, Icon, Collapse, CollapseItem } from 'vant';
import { getAddFriend, getFriendList } from '@/v-api/addressbook/person';
import PersonItem from './PersonItem.vue'
import router from '@/router'
import { Local } from '@/utils/storage';
const text = ref('');
const collapseValue = ref(['0']);
const container = ref(null)
const noticeBarvisible = ref(false)
const searchWord = ref('')
const contactData = ref([])

const onContactClick = (item) => {
  Local.set('chatInfo', item)
  router.push('/chat-person')
}
const moveToSearch = () => {
  router.push('/person-search-add')
}
const moveToAdd = () => {
  router.push('/person-show-add')
}
const filteredContacts = computed(() => {
  if (!searchWord.value) {
    return contactData.value;
  }
  return contactData.value.filter((contact) =>
    contact.nickname.toLowerCase().includes(searchWord.value.toLowerCase())
  );
});
onMounted(async () => {
  const dataLength = await getAddFriend();
  contactData.value = await getFriendList();

  if (dataLength > 0) {
    noticeBarvisible.value = true;
    text.value = `有${dataLength}个添加好友申请,点击查看`;
  }
});
</script>

<style scoped>
.button-style {
  margin-left: 80%;
  color: #eb542e
}

.function-titile {
  margin-left: 3.5rem;
  font-weight: bold;
  letter-spacing: 3px;
  font-size: 12.5px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.function-icon {
  margin-right: 3.5rem;
  color: #1e1e1e;
}
</style>